import * as React from "react"
import { AdditionalFunding, AdditionalSpread } from "."
import { IAdditionalPanel } from "../types"

export const AdditionalPanel: React.FC<IAdditionalPanel> = props => {
	const {
		userId,
		handlerPopupWindow,
		getDataTickers,
		getFundingRates,
		getSpreads,
		saveSpreads,
		fundingRates,
		spreads,
		scrollStyle,
	} = props

	return (
		<div className="container">
			<div className="row mt-3">
				<ul className="nav nav-pills mb-3" id="additionalTabs" role="tablist">
					{/* Funding */}
					<li className="nav-item">
						<a
							className="nav-link active"
							id="fundingTab"
							data-toggle="pill"
							href="#fundingContent"
							role="tab"
							aria-controls="fundingContent"
							aria-selected="true"
						>
							Funding
						</a>
					</li>

					{/* Spread */}
					<li className="nav-item">
						<a
							className="nav-link"
							id="spreadTab"
							data-toggle="pill"
							href="#spreadContent"
							role="tab"
							aria-controls="spreadContent"
							aria-selected="false"
						>
							Spread
						</a>
					</li>
				</ul>
			</div>

			<div className="tab-content" id="additionalsContent">
				{/* Funding */}
				<div
					className="tab-pane fade show active"
					id="fundingContent"
					role="tabpanel"
					aria-labelledby="fundingTab"
				>
					<AdditionalFunding
						getDataTickers={getDataTickers}
						getFundingRates={getFundingRates}
						fundingRates={fundingRates}
						userId={userId}
						scrollStyle={{
							height: scrollStyle.height - 100,
							width: scrollStyle.width,
						}}
					/>
				</div>

				{/* Spread */}
				<div
					className="tab-pane fade"
					id="spreadContent"
					role="tabpanel"
					aria-labelledby="spreadTab"
				>
					<AdditionalSpread
						handlerPopupWindow={handlerPopupWindow}
						getSpreads={getSpreads}
						saveSpreads={saveSpreads}
						spreads={spreads}
						userId={userId}
						scrollStyle={{
							height: scrollStyle.height - 100,
							width: scrollStyle.width,
						}}
					/>
				</div>
			</div>
		</div>
	)
}
